<template>
  <div>
    <el-table
      :data="roles"
      @expand-change="expandChange"
      ref="roleTableRef"
    >
      <el-table-column
        type="expand"
      >
        <template slot-scope="{row}">
          <el-row :class="['top-row',index==0?'':'add-top-line']" v-for="(first,index) in row.children" :key="first.id">
            <el-col :span="6">
                <el-tag
                  type="success"
                  closable
                  @close="deletePerimission(row,first.id)"
                >
                  {{first.name}}
                </el-tag>
            </el-col>
            <el-col :span="18">
                <el-row :class="['first-row',index01 == 0?'':'add-top-line']" v-for="(second,index01) in first.children" :key="second.id">
                  <el-col :span="8">
                      <el-tag type="danger" closable @close="deletePerimission(row,second.id)">{{second.name}}</el-tag>
                  </el-col>
                  <el-col :span="16">
                    <el-tag
                      class="three-tag"
                      v-for="last in second.children"
                      type="warning"
                      size="small"
                      closable
                      @close="deletePerimission(row,last.id)"
                    >
                      {{last.name}}
                    </el-tag>
                  </el-col>
                </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column
        label="角色id"
        prop="id"
      >
      </el-table-column>
      <el-table-column
      label="角色名称"
      prop="name"
      >
      </el-table-column>
      <el-table-column
      label="操作"
      width="240"
      >
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="update(row)">更新</el-button>
          <el-button type="success" size="mini" @click="updatePermission(row)">权限更新</el-button>
          <el-button type="warning" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

  import {rolePermissions,deleteRolePermission} from "../../../../network/permission/PermissionRequest";
  import Vue from 'vue';

  export default {
    name: "RoleTable",
    data:function () {

      return {

      }
    },
    props:{

      roles:{
        type:Array,
        default:function () {

          return []
        }
      }
    },
    methods:{
      async expandChange(row,expandedRows){

        // 打开 row 在 expandedRows 里面
        // 关闭，row 不在expandedRows 里面
        let exist = false;

        expandedRows.forEach(data=>{

          if (data.id == row.id){

            exist = true;
          }
        });

        if (exist && row.children === undefined){

         const permissions = await rolePermissions({
            roleid:row.id
          });

          // 把children这个属性加到vue数据绑定中
          Vue.set(row,'children',permissions);
          // 下一次事件循环执行
          this.$nextTick(()=>{

            // 设置展开
            this.$refs.roleTableRef.toggleRowExpansion(row,true);
          });

        }

      },
      updatePermission(row){

          this.$emit('roleUpdateClick',row);
      },
      async deletePerimission(row,permissionId){

        let data= await deleteRolePermission({
                          roleid:row.id,
                          permissionid:permissionId
                          });

        row.children = data;
      }
    }
  }
</script>

<style scoped>

  .top-row{

    padding: 10px 0px;
    display: flex;
    align-items: center;
  }

  .add-top-line{
    border-top: 1px solid #eee;
  }

  .add-bottom-line{
    border-bottom: 1px solid #eee;
  }

  .first-row{

    padding: 10px 0px;
    display: flex;
    align-items: center;
  }

  .three-tag{

    margin: 5px;
  }
</style>
